import QtQuick 2.0

Item {
    width: 160
    height: 160

    property int currentAngle: 0
    property real minAngle: 100
    property real maxAngle: 240

    Canvas{
        id: canvas
        anchors.fill: parent
        contextType: "2d"
        onPaint: {
            var ctx = getContext("2d")
            ctx.reset()

            ctx.save()
//            ctx.setLineDash([4,2])
            ctx.lineWidth = 2;
            ctx.strokeStyle = "#00FFFF"
            ctx.fillStyle = Qt.rgba(0, 255, 255, 0.3)
            ctx.beginPath();
            ctx.moveTo(80, 80)
            ctx.arc(80, 80, 79, minAngle*Math.PI/180, maxAngle * Math.PI/180);
            ctx.closePath();
            ctx.fill()
            ctx.stroke()
            ctx.restore();

            ctx.save()
            ctx.translate(80,80)
            ctx.lineWidth = 20;
            ctx.strokeStyle = "#00FFFF"
            ctx.beginPath();
            ctx.arc(0, 0, 70, minAngle*Math.PI/180, (currentAngle+minAngle) * Math.PI/180);
            ctx.stroke()
            ctx.restore();
        }
    }
    onCurrentAngleChanged: {
        canvas.requestPaint()
    }
}
